<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
export default {
  name: 'Rchart',
  data () {
    return {
      chartInstance: null,
      reald: null,
      initOption: null,
      timer: null,
      ployData: [],
      // 'rgb(0,108,237)',, 'rgb(6,253,188)'
      colorg: ['rgb(0,207,255)', 'rgb(0,255,255)']
    }
  },
  created () {
  },
  mounted () {
    this.initChart()
  },
  props: {
    chartDatas: {
      type: Array,
      required: true
    }
  },
  watch: {
    chartDatas: {
      handler (newVal, oldVal) {
        if (newVal.length > 0) {
          // console.log('newVal都是啥', newVal)
          this.reald = JSON.parse(JSON.stringify(newVal))
          this.timeWay(this.reald)
          // var copys = JSON.parse(JSON.stringify(this.reald))
          // this.reald[0].splice(0, 1)
          this.reald[0].splice(2, 1)
          const seriess = {
            encode: {
              x: 0,
              y: 1
            },
            type: 'line',
            symbol: 'circle', // 节点样式
            lineStyle: {
              normal: {
                width: 2,
                // color: '#3fb594'
                color: this.colorg[0]
              }
            },
            markPoint: {
              symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
              symbolSize: [33, 24],
              symbolKeepAspect: true,
              itemStyle: {
                color: 'rgb(0,213,250,0.4)'
              },
              label: {
                fontSize: 10,
                offset: [0, -2]
              },
              symbolOffset: ['23%', '-60%'],
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            itemStyle: {
              color: this.colorg[0],
              // borderColor: 'rgb(0,115,100)',
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0)',
              shadowBlur: 0,
              shadowOffsetY: 0,
              shadowOffsetX: 0
            }
          }
          this.timer = setTimeout(() => {
            this.updateChart(seriess, this.reald)
          }, 500)
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    timeWay (arrBig) {
      for (var i = 1; i < arrBig.length; i++) {
        arrBig[i][0] = arrBig[i][0].substring(5, arrBig[i][0].length - 3)
      }
    },
    initChart () {
      this.initOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        legend: {
          top: '14%',
          itemWidth: 15,
          itemHeight: 8,
          textStyle: {
            color: '#a6bde9',
            fontSize: 10
          }
        },
        grid: {
          top: '24%',
          left: '6%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: { // 不显示轴刻度
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#a6bde9'
            }
          },
          axisLabel: {
            interval: 'auto',
            formatter: function (value) {
              let ret = '' // 拼接加\n返回的类目项
              var maxLength = 6 // 每行最多个数
              var valLength = value.length // x轴一个项的总数
              var rowN = Math.ceil(valLength / maxLength)
              if (rowN > 1) { // 如果大于5个字符
                for (let i = 0; i < rowN; i++) {
                  let temp = ''
                  temp = value.substring(i * maxLength, i * maxLength + maxLength) + '\n'
                  ret += temp
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              fontSize: 8
            }
          }
        },
        yAxis: [
          {
            name: '风机频率(hz)',
            nameTextStyle: {
              color: 'rgb(154, 170, 203)',
              padding: [0, 0, 0, -22]
            },
            type: 'value',
            axisLabel: {
              interval: 'auto',
              formatter: '{value}',
              color: 'rgb(154, 170, 203)'
            },
            axisTick: { // 不显示轴刻度
              show: false
            },
            // nameLocation: 'start',
            // min: 'dataMin',
            // max: 'dataMax', // y轴范围
            splitLine: { // 属于y轴的是grid横线
              show: false,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        dataset: {
          source: []
        },
        series: []
      }
      this.chartInstance = this.$echarts.init(this.$refs.echartsPoly)
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    updateChart (seriesGroup, realData) {
      const grid2 = {
        top: '9%',
        left: '5%',
        right: '7%',
        bottom: '2%',
        containLabel: true
      }
      const legend2 = {
        top: '0%',
        itemWidth: 15,
        itemHeight: 8,
        textStyle: {
          color: '#a6bde9',
          fontSize: 10
        }
      }
      var maxR = function (value) {
        // return value.max.toFixed(1)
        value.max = value.max * 10
        var finas = Math.ceil(value.max) / 10
        return finas
      }
      //         max: function (value) {
      //   // return value.max.toFixed(1)
      //   return Math.ceil(value.max)
      // },
      const dataOption = {
        series: seriesGroup,
        yAxis: [{
          name: '',
          min: 0,
          max: maxR
        }],
        grid: grid2,
        legend: legend2,
        xAxis: {
          axisLabel: {
            // interval: name === '温度' ? 10 : 'auto'
            interval: 'auto'
          }
        },
        dataset: {
          source: realData // 数组
        }
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style  scoped>
.charts_container {
  width: 100%;
  height: 100%;
}
</style>
